<template>
	<el-form size="large" class="login-content-form">
		<el-form-item class="login-animation1">
			<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="ruleForm.username" clearable
				autocomplete="off">
				<template #prefix>
					<i class="iconfont icon-dianhua el-input__icon"></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2">
			<el-col :span="15">
				<el-input type="text" maxlength="6" :placeholder="$t('message.mobile.placeholder2')" v-model="ruleForm.code"
					clearable autocomplete="off">
					<template #prefix>
						<el-icon class="el-input__icon"><ele-Position /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="8">
				<el-button class="login-content-code" :disabled="butDisable" @click="getPhoneCode">{{ butText == null ?
					$t('message.mobile.codeText') : butText }}</el-button>
			</el-col>
		</el-form-item>
		<el-form-item class="login-animation2" >
            <el-checkbox v-model="ruleForm.isAutoLogin" label="90天内自动登录" size="large" />
        </el-form-item>
		<el-form-item class="login-animation3">
			<el-button round type="primary" class="login-content-submit" :loading="loading.signIn" @click="onLoginSubmit">
				<span>{{ $t('message.mobile.btnText') }}</span>
			</el-button>
		</el-form-item>
		<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
	</el-form>

	<Enterprise ref="enterprise" v-model:dialogDrawer="isShowAllEnterprise" :all-enterprise="enterprises" @onSubmit="goHomePage"/>

</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, computed, ref, getCurrentInstance } from 'vue'
import { getCode, mobileLogin, setEnterprise } from '/@/api/login';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { Session,Local } from '/@/utils/storage'
import Cookies from 'js-cookie'
import { useThemeConfig } from '/@/stores/themeConfig'
import { initFrontEndControlRoutes } from '/@/router/frontEnd'
import { initBackEndControlRoutes } from '/@/router/backEnd'
import { storeToRefs } from 'pinia'
import { formatAxis } from '/@/utils/formatTime'
import { NextLoading } from '/@/utils/loading'
import { useI18n } from 'vue-i18n'
import Enterprise from '/@/components/enterprise/index.vue'
// 定义接口来定义对象的类型
interface LoginMobileState {
	username: any;
	code: string | number | undefined;
	isAutoLogin: boolean;
}

// 定义对象与类型
const ruleForm: LoginMobileState = {
	username: '',
	code: '',
	isAutoLogin:false
};

export default defineComponent({
	name: 'loginMobile',
	components: {
        Enterprise
    },
	setup() {
		const state = reactive({
			ruleForm,
			butText: null,
			butDisable: false,
			isShowAllEnterprise: false,
			enterprises: [],
			loading: {
				signIn: false,
			},
			isFirstLogin:"0"
		});
		const route = useRoute()
		const router = useRouter()
		const storesThemeConfig = useThemeConfig()
		const { themeConfig } = storeToRefs(storesThemeConfig)
		const { proxy } = <any>getCurrentInstance();
		const { t } = useI18n()
		const getPhoneCode = () => {
			if (ruleForm.username == '' || ruleForm.username == null) {
				ElMessage.error('请输入手机号!')
			} else {
				state.butDisable = true
				codeCountdown()
				getCode({ phone: ruleForm.username }).then(res => {
					if (res.code == 0) {
						ElMessage.success('短信已发送!')
					} else {
						ElMessage.error('发送失败!')
					}
				})
			}

		}
		const onLoginSubmit = async () => {
			let res = await mobileLogin(ruleForm);
			// 存储 token 到浏览器缓存
			Session.set('token', res.data.token)
			Cookies.set('userId', res.data.userId)

			 // 如果选定90天免登录
			 if(state.ruleForm.isAutoLogin){
				Local.set("17work",{userId:res.data.userId,token:res.data.token,userName:res.data.username})
            }

			state.isFirstLogin = res.data.isFirstLogin
			// TODO 如果用户关联企业数量大于1则弹框让用户选择进入哪个
			if (res.data.enterprises && res.data.enterprises.length > 1) {
				// {id: 企业id, name: 企业名称}
				// await setEnterprise(res.data.enterprises[0].id)
				state.enterprises = res.data.enterprises
				state.isShowAllEnterprise = true
			} else {
				// 只有一个企业, 保存用户在该企业的名称
				if (res.data.enterprises && res.data.enterprises.length == 1) {
					Cookies.set('userName', res.data.enterprises[0].userName)
					Cookies.set('enterpriseName', res.data.enterprises[0].name)
				} else {
					Cookies.set('userName', res.data.nickname)
				}
				// 登录成功 初始化
				proxy.initialize()
				// TODO 获取路由菜单.....
				// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
				// Cookies.set('userName', state.ruleForm.username)
				if (!themeConfig.value.isRequestRoutes) {
					// 前端控制路由，2、请注意执行顺序
					await initFrontEndControlRoutes()
					signInSuccess()
				} else {
					// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
					// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
					await initBackEndControlRoutes()
					// 执行完 initBackEndControlRoutes，再执行 signInSuccess
					signInSuccess()
				}
			}

		}

		const goCreateEnterpriseInfo = () => {
			router.push({
				path: '/enterpriseInfo'
			})
		}
		// 登录成功后的跳转
		const signInSuccess = () => {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value

			if (state.isFirstLogin == '1') {
				goCreateEnterpriseInfo()
			} else {
				// 登录成功，跳到转首页
				// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
				if (route.query?.redirect) {
					router.push({
						path: <string>route.query?.redirect,
						query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
					})
				} else {
					router.push('/')
				}
			}

			// 登录成功提示
			// 关闭 loading
			state.loading.signIn = true
			const signInText = t('message.signInText')
			ElMessage.success(`${currentTimeInfo}，${signInText}`)
			// 添加 loading，防止第一次进入界面时出现短暂空白
			NextLoading.start()
		}
		// 时间获取
		const currentTime = computed(() => {
			return formatAxis(new Date())
		})

		const codeCountdown = () => {
			let time = 60
			const interver = setInterval(() => {
				time--
				if (time <= 0) {
					state.butDisable = false
					state.butText = '获取验证码'
					clearInterval(interver)
				} else {
					state.butText = '重新获取（' + time + '）秒'
				}
			}, 1000)
		}
		// 选择企业返回
        const goHomePage = (val) => {
            // 登录的企业
            setEnterprise(val)

            // 登录成功 初始化
            proxy.initialize()
            // TODO 获取路由菜单.....
            // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
            Cookies.set('userName', state.ruleForm.username)
            if (!themeConfig.value.isRequestRoutes) {
                // 前端控制路由，2、请注意执行顺序
                initFrontEndControlRoutes()
                signInSuccess()
            } else {
                // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
                // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
                initBackEndControlRoutes()
                // 执行完 initBackEndControlRoutes，再执行 signInSuccess
                signInSuccess()
            }
        }
		return {
			getPhoneCode,
			codeCountdown,
			onLoginSubmit,
			goCreateEnterpriseInfo,
			signInSuccess,
			currentTime,
			goHomePage,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;

	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}

	.login-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
